<template>
  <tab-bar>
    <!--
     tab-bar是菜单栏组件,使用一次就会替换全部slot
     每个插槽都可以动态绑定 图片与文字
     active-color是动态绑定的 可以自己传值

     为什么使用三次TabBarItem组件,因为每个组件都是独立的,使用几个就会渲染出几个按钮
     又因为每个菜单栏按钮不一样,所以需要使用具名插槽来实现
    -->
    <!--  这里的path(是属性)和active-color(属性) 对应props里面 的属性   -->
    <TabBarItem path="/home" active-color="blue">
      <img slot="item-icon-active" src="./assets/img/tab-bar/首页a.png">
      <img slot="item-icon" src="./assets/img/tab-bar/首页.png" alt="">
      <!-- 使图片与文字分行  div是独占一行的-->
      <div slot="item-text"> 首页</div>
    </TabBarItem>

    <TabBarItem path="/category">
      <img slot="item-icon-active" src="./assets/img/tab-bar/分类ac.png">
      <img slot="item-icon" src="./assets/img/tab-bar/分类.png" alt="">
      <!-- 使图片与文字分行  div是独占一行的-->
      <div slot="item-text"> 分类</div>
    </TabBarItem>

    <TabBarItem path="/shop">
      <img slot="item-icon-active" src="./assets/img/tab-bar/购物车ac.png">
      <img slot="item-icon" src="./assets/img/tab-bar/购物车.png" alt="">
      <div slot="item-text"> 购物车</div>
    </TabBarItem>

    <TabBarItem path="/profile">
      <img slot="item-icon-active" src="./assets/img/tab-bar/我的.png">
      <img slot="item-icon" src="./assets/img/tab-bar/我的ac.png" alt="">
      <div slot="item-text"> 我的</div>
    </TabBarItem>

  </tab-bar>
</template>

<script>
  import  TabBar from './tab-bar/tab-bar'
  import  TabBarItem from './tab-bar/tab-bar-item'
  export default {
    name: "mainTabBar",
    components:{
      TabBar,
      TabBarItem
      //最后在App.vue里面引入mainTabBar
    }
  }
</script>

<style scoped>

</style>
